<!---面诊结果-->
<template>
  <view class="face-result-page">
    <scroll-view scroll-y class="scroll-view-container">
      <view class="content-wrapper">
        <view class="user-info-header">
          <image class="avatar" :src="userInfo.avatar" />
          <view class="user-detail">
            <view class="user-name">{{ userInfo.username || userInfo.nickName }}</view>
            <view class="timestamp">{{ resultData.createTime }}</view>
          </view>
        </view>

        <view class="content-card">
          <view class="main-tabs">
            <view class="tab-item" :class="{ active: currentTab === 'diagnosis' }" @click="switchTab('diagnosis')">{{
              t('FaceResultsPage.diagnosis') }}</view>
            <view class="tab-item" :class="{ active: currentTab === 'suggestion' }" @click="switchTab('suggestion')">{{
              t('FaceResultsPage.suggestion') }}</view>
          </view>

          <view v-if="currentTab === 'diagnosis'" class="diagnosis-content">
            <view class="section-box border-dashed">
              <view class="section-title">{{ t('FaceResultsPage.detectionResult') }}</view>
              <view class="centered-content">
                <image class="result-illustration" src="/static/face_result/face_01.jpg" mode="aspectFit" />
                <view class="main-result-text">{{ resultData.complexion.result }}</view>
                <view class="sub-tabs">
                  <text class="tag" :class="{ active: currentComplexionTab === 1 }" @click="selectComplexionTab(1)">{{
                    t('FaceResultsPage.resultAnalysis') }}</text>
                  <text class="tag" :class="{ active: currentComplexionTab === 2 }" @click="selectComplexionTab(2)">{{
                    t('FaceResultsPage.pathologicalMeaning') }}</text>
                </view>
                <view v-if="currentComplexionTab === 1" class="desc-more" :class="{ expanded: expandedComplexion }">
                  <view class="desc-text">{{ resultData.complexion.diagnosticAnalysis }}</view>
                  <view class="more-btn" @click="expandedComplexion = true"
                    v-if="!expandedComplexion && needExpandComplexion1">{{ t('FaceResultsPage.more') }}</view>
                </view>
                <view v-if="currentComplexionTab === 2" class="desc-more" :class="{ expanded: expandedComplexion }">
                  <view class="desc-text">{{ resultData.complexion.illnessHazard }}</view>
                  <view class="more-btn" @click="expandedComplexion = true"
                    v-if="!expandedComplexion && needExpandComplexion2">{{ t('FaceResultsPage.more') }}</view>
                </view>
              </view>
            </view>

            <view class="section-box border-dashed">
              <view class="organ-header">
                <view class="organ-title">
                  <image class="organ-icon" src="/static/face_result/face_02.jpg" mode="aspectFill" />
                  <text>{{ t('FaceResultsPage.lung') }}</text>
                </view>
                <view class="user-photo-container" @click="previewImage(resultData.faceImgPath)">
                  <image class="user-photo" :src="resultData.faceImgPath" mode="aspectFill" />
                  <view class="click-tip">{{ t('FaceResultsPage.clickToView') }}</view>
                </view>
              </view>
              <view class="desc-more" :class="{ expanded: expandedBase }">
                <view class="desc-text">{{ resultData.complexionBaseExplain }}</view>
                <view class="more-btn" @click="expandedBase = true" v-if="!expandedBase && needExpandBase">{{
                  t('FaceResultsPage.more') }}</view>
              </view>
            </view>

            <view class="section-box" v-if="resultData.eye">
              <view class="section-title">{{ t('FaceResultsPage.eyeColor') }}</view>
              <view class="centered-content">
                <image class="result-illustration eye-illustration" src="/static/face_result/face_03.jpg"
                  mode="aspectFit" />
                <view class="main-result-text">{{ resultData.eye.result }}</view>
                <view class="sub-tabs">
                  <text class="tag" :class="{ active: currentEyeTab === 1 }" @click="selectEyeTab(1)">{{
                    t('FaceResultsPage.resultAnalysis') }}</text>
                  <text class="tag" :class="{ active: currentEyeTab === 2 }" @click="selectEyeTab(2)">{{
                    t('FaceResultsPage.pathologicalMeaning') }}</text>
                </view>
                <view v-if="currentEyeTab === 1" class="desc-more" :class="{ expanded: expandedEye }">
                  <view class="desc-text">{{ resultData.eye.eyeDiagnosticAnalysis }}</view>
                  <view class="desc-text">{{ resultData.eye.eyeBagDiagnosticAnalysis }}</view>
                  <view class="more-btn" @click="expandedEye = true" v-if="!expandedEye && needExpandEye1">{{
                    t('FaceResultsPage.more') }}</view>
                </view>
                <view v-if="currentEyeTab === 2" class="desc-more" :class="{ expanded: expandedEye }">
                  <view class="desc-text">{{ resultData.eye.relatedHazards }}</view>
                  <view class="more-btn" @click="expandedEye = true" v-if="!expandedEye && needExpandEye2">{{
                    t('FaceResultsPage.more') }}</view>
                </view>
              </view>
            </view>
          </view>

          <view v-if="currentTab === 'suggestion'" class="suggestion-content">
            <view class="suggestion-cards">
              <view class="card-item" @click="selectedSuggestionTab = 'tcm'">
                <image src="/static/face_result/face_04.jpg" mode="aspectFill" />
                <view class="mask" v-if="selectedSuggestionTab !== 'tcm'"></view>
                <text class="card-label" :class="{ active: selectedSuggestionTab === 'tcm' }">{{
                  t('FaceResultsPage.tcm') }}</text>
              </view>
              <view class="card-item" @click="selectedSuggestionTab = 'diet'">
                <image src="/static/face_result/face_05.jpg" mode="aspectFill" />
                <view class="mask" v-if="selectedSuggestionTab !== 'diet'"></view>
                <text class="card-label" :class="{ active: selectedSuggestionTab === 'diet' }">{{
                  t('FaceResultsPage.diet') }}</text>
              </view>
            </view>
            <view v-if="selectedSuggestionTab === 'tcm'">
              <view class="suggestion-text" v-for="(para, index) in processedMedicineText" :key="`tcm-${index}`">
                {{ para }}
              </view>
            </view>
            <view v-if="selectedSuggestionTab === 'diet'">
              <view class="suggestion-text">
                {{ resultData.suggest.food }}
              </view>
            </view>
            <view class="disclaimer">{{ t('FaceResultsPage.disclaimer') }}</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- <view class="footer-bar">
      <view class="action-btn consult-btn" @click="consultDoctor">咨询医生</view>
      <view class="action-btn mall-btn" @click="goToMall">健康商城</view>
    </view> -->
  </view>
</template>

<script>
import { useI18n } from 'vue-i18n';
export default {
  name: "FaceResultsPage",
  props: {
    resultData: {
      type: Object,
      required: true,
      default: () => ({
        avatar: "",
        nickName: "游客",
        createTime: "",
        faceImgPath: "",
        complexionBaseExplain: "",
        complexion: {
          result: "",
          diagnosticAnalysis: "",
          illnessHazard: "",
        },
        eye: {
          result: "",
          eyeDiagnosticAnalysis: "",
          eyeBagDiagnosticAnalysis: "",
          relatedHazards: "",
        },
        suggest: {
          medicine: "",
          food: "",
        },
        shoppingMallAppId: "",
        shoppingMallUrl: "",
      }),
    },
  },
  data() {
    return {
      currentTab: "diagnosis",
      selectedSuggestionTab: "tcm",
      currentComplexionTab: 1,
      currentEyeTab: 1,
      expandedComplexion: false,
      expandedBase: false,
      expandedEye: false,
    };
  },
  computed: {
    processedMedicineText() {
      const text = this.resultData?.suggest?.medicine || "";
      if (!text) return [];
      return text.split(/[\n\r]+/).filter((p) => p.trim() !== "");
    },
    needExpandComplexion1() {
      return this.isTextLong(this.resultData?.complexion?.diagnosticAnalysis);
    },
    needExpandComplexion2() {
      return this.isTextLong(this.resultData?.complexion?.illnessHazard);
    },
    needExpandBase() {
      return this.isTextLong(this.resultData?.complexionBaseExplain);
    },
    needExpandEye1() {
      const text = (this.resultData?.eye?.eyeDiagnosticAnalysis || "") + (this.resultData?.eye?.eyeBagDiagnosticAnalysis || "");
      return this.isTextLong(text);
    },
    needExpandEye2() {
      return this.isTextLong(this.resultData?.eye?.relatedHazards);
    },
    userInfo() {
      return this.resultData?.userInfo;
    },
  },
  setup() {
    const { t } = useI18n();
    return { t };
  },
  methods: {
    selectComplexionTab(tabIndex) {
      this.currentComplexionTab = tabIndex;
      this.expandedComplexion = false;
    },
    selectEyeTab(tabIndex) {
      this.currentEyeTab = tabIndex;
      this.expandedEye = false;
    },
    switchTab(tab) {
      this.currentTab = tab;
    },
    previewImage(url) {
      if (!url) return;
      uni.previewImage({
        urls: [url],
      });
    },
    consultDoctor() {
      console.log("Navigate to consult doctor");
    },
    goToMall() {
      console.log("Navigate to health mall");
    },
    isTextLong(text, lineLimit = 3) {
      if (!text) return false;
      const charsPerLine = 25;
      return text.length > charsPerLine * lineLimit;
    },
  },
};
</script>

<style lang="scss" scoped>
.face-result-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 固定高度为屏幕高度 */
  background-color: #afa0ec;
}

.scroll-view-container {
  flex: 1;

  height: 0;
}

.content-wrapper {
  padding: 30rpx;
  box-sizing: border-box;
  /* 增加底部内边距，为 fixed 页脚留出空间 */
  /* 120rpx (footer height) + 30rpx (extra space) = 150rpx */
  padding-bottom: 200rpx;
}

.user-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-top: 0;
  color: #fff;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 3rpx solid rgba(255, 255, 255, 0.6);
    margin-right: 20rpx;
  }

  .user-detail {
    .user-name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .timestamp {
      font-size: 24rpx;
      opacity: 0.8;
      margin-top: 5rpx;
    }
  }
}

.content-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.main-tabs {
  display: flex;
  padding: 30rpx 0 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;

  .tab-item {
    padding: 10rpx 0;
    font-size: 32rpx;
    color: #666;
    position: relative;
    transition: all 0.3s ease;

    &:not(:last-child) {
      margin-right: 50rpx;
    }

    &.active {
      color: #9177ff;
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: #9177ff;
        border-radius: 3rpx;
      }
    }
  }
}

.section-box {
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;

  &.border-dashed {
    border-bottom: 2rpx dashed #e5e5e5;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: inline-block;
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #333;
    margin-right: 15rpx;
  }
}

.centered-content {
  text-align: center;
}

.result-illustration {
  width: 100%;
  height: 170rpx;
  margin-bottom: 10rpx;

  &.eye-illustration {
    width: 220rpx;
    height: 120rpx;
  }
}

.main-result-text {
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}

.sub-tabs {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 20rpx;

  .tag {
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
    background: #f5f5f5;
    color: #666;
    transition: all 0.2s;

    &.active {
      background: #9177ff;
      color: #fff;
      font-weight: 500;
    }
  }
}

.desc-more {
  position: relative;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  text-align: left;
  overflow: hidden;

  &:not(.expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .more-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #9177ff;
    font-weight: 500;
    background: #fff;
    padding-left: 10rpx;
  }
}

.organ-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;

  .organ-title {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-weight: 500;

    .organ-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 15rpx;
      border-radius: 50%;
    }
  }

  .user-photo-container {
    text-align: center;

    .user-photo {
      width: 100rpx;
      height: 100rpx;
      border-radius: 12rpx;
      background-color: #f0f0f0;
    }

    .click-tip {
      font-size: 24rpx;
      color: #999;
      margin-top: 5rpx;
    }
  }
}

.suggestion-content {
  .suggestion-cards {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .card-item {
      flex: 1;
      position: relative;
      border-radius: 12rpx;
      overflow: hidden;
      height: 160rpx;

      image {
        width: 100%;
        height: 100%;
      }

      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
      }

      .card-label {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;
        color: #fff;
        font-size: 28rpx;
        padding: 8rpx 24rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 30rpx;
        z-index: 2;

        &.active {
          background-color: #9177ff;
        }
      }
    }
  }

  .suggestion-text {
    font-size: 28rpx;
    line-height: 1.7;
    margin-bottom: 20rpx;
    text-align: justify;
  }

  .disclaimer {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin-top: 40rpx;
  }
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  gap: 30rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;

  /* 安全区域适配 */
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    margin: 0;

    &.consult-btn {
      background-color: #e87171;
    }

    &.mall-btn {
      background-color: #f8b481;
    }
  }
}
</style>
